<template>
  <div>
    <!-- 居中 -->
    <van-row type="flex" justify="center">
      <van-col class="title" span="24">消息</van-col>
      <van-col span="24">
        <van-grid border :column-num="4" class="grid">
          <van-grid-item icon="good-job-o" text="点赞" />
          <van-grid-item icon="gift-o" text="礼物" />
          <van-grid-item icon="bar-chart-o" text="听歌数据" />
          <van-grid-item icon="qr" text="二维码" />
        </van-grid>
      </van-col>
      <van-empty description="暂无消息" />
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.title{
  height: 48px;
  border-bottom:1px solid #604ac1 ;
  /* background-color: aqua; */
  font-size: 14px;
  font-weight: 700;
  color: #333333;
  text-align: center;
  line-height: 48px;
}
.grid{
  border-bottom:1px solid #604ac10e ;
}
</style>
